<template>
  <div>
    <Content style="text-align:center">
      <Form :label-width="100">
        <FormItem label="选择居村委">
          <Cascader :data="regionArray" @on-change="regionSelector" :load-data="loadRegion"></Cascader>
        </FormItem>
        <FormItem label="选择导入文件">
          <Upload
            :before-upload="bfUploadExcel"
            :format="['xls','csv','xlsx']"
            :max-size="51200"
            :on-format-error="formatErrorExcel"
            :on-exceeded-size="maxSizeExcel"
            action="http">
            <Button icon="ios-cloud-upload-outline">
            <span v-if="hasExcelFile">{{excelFile.name+'('+excelFile.sizeTips+')'}}</span>
            <span v-else>请选择Excel文件导入村民</span>
            </Button>
          </Upload>
        </FormItem>
        <FormItem label="模板下载">
          <a href="https://view-assets.oss-cn-chengdu.aliyuncs.com/files/Villager_Template_20241126.xlsx" target="_blank">点击下载Excel导入模板</a>
        </FormItem>
        <Button type="primary" @click="Submit" :disabled="btnDisabled">导入</Button>
      </Form>
    </Content>
  </div>
</template>
<script>
export default {
  name: 'ImportExcelVue',
  props: {
    callbank: Function,
    seletions: Array
  },
  data() {
    return {
      excelFile: {},
      regionArray: [],
      villageCode: null,
      btnDisabled: false,
      hasExcelFile: false
    }
  },
  methods: {
    //初始化
    Init() {
      this.regionInit()
      this.hasExcelFile = false
      this.excelFile={}
    },
    regionInit() {
      new this.$rest({
				gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/plus/union/region/lazy",
				query: {
					equal: {
            regionId: "0"
          }
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						this.regionArray = data
					} else {
						this.$Message.error({
              content: res.data.msg
            })
					}
				}
			}).get()
    },
		loadRegion(item, callback) {
			item.loading = true
			new this.$rest({
				gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/plus/union/region/lazy",
				query: {
					equal: {
            regionId: item.id,
            regionLevel: 5
          }
				},
				action: (res)=>{
					if(res.data.code === 20000){
						const data = res.data.data
						item.children = data
						item.loading = false
            callback()
					} else {
						this.$Message.error({
              content: res.data.msg
            })
					}
				}
			}).get()
		},
    regionSelector(value, data) {
      this.villageCode = data[4].value
		},
    Submit(){
      if(!this.villageCode) {
        this.$Message.error("请选择居村委")
        return false
      }
      if(!this.hasExcelFile) {
        this.$Message.error("请选择导入文件")
        return false
      }
      this.btnDisabled = true
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-uc",
        url: "/v1.0/household-src/household/import",
        form: {
          binaryFile: this.excelFile.file,
          villageCode: this.villageCode
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: "导入成功",
              onClose: () => {
                this.callbank()
              },
            })
          } else {
            this.btnDisabled = false
            this.$Notice.warning({
              title: "导入失败",
              desc: res.data.msg,
            });
          }
        }
      }).upload()
    },
    bfUploadExcel (file) {
        this.excelFile.file = file
        this.excelFile.name = file.name
        this.excelFile.sizeTips = this.$size(file.size)
        this.hasExcelFile = true
        console.log('选择文件 ->',this.excelFile)
        return false
    },
    formatErrorExcel(file) {
        this.$Notice.warning({
            title: '文件格式不支持',
            desc: `${file.name}文件格式不支持，请使用xls,csv,xlsx`
        })
    },
    maxSizeExcel(file) {
        this.$Notice.warning({
            title: '文件过大',
            desc: `${file.name}文件大小不能超过50M`
        })
    }
  },
  created() {
    
  },
};
</script>

<style lang="less" scoped>
.cust-form {
  text-align: left !important;
}
</style>
